<!--
 * @Author: qf
 * @Date: 2021-06-02 15:04:47
 * @LastEditTime: 2021-07-02 17:48:08
 * @LastEditors: maoyu
 * @Description:
-->
<script>
import { getButtonAttribute } from '@/utils/common'
export default {
  name: 'ToolbarButton',
  /**
   * @Author: zzp
   * @Description: jsx的组件的标识，必须参数
   */
  functional: true,
  props: {
    /**
     * @Author: zzp
     * @Date: 2019-11-07 15:54:21
     * @Description: buttonList按钮全局，length需要单独显示的按钮个数，默认为10个,buttonData用于传递列表参数
     */
    buttonList: {
      type: Array,
      default: () => {
        return []
      },
      required: true
    },
    length: {
      type: Number,
      default: 20
    }
  },
  methods: {
  },
  // jsx渲染组件
  render: (h, context) => {
    let routerName = context.parent.$route.name
    let routerPermission = ''
    routerPermission = context.parent.$store.getters.permissionBtns[routerName]
    let buttonPermission = []
    if (routerPermission && routerPermission.length > 0) {
      buttonPermission = routerPermission.split(',')
    }
    // allow 是否有权限，用于未在接口配置又需显示，默认1
    let buttonList = context.props.buttonList.filter(element => (buttonPermission.includes(element.permitName) || element.allow === 1))
    return [
      <span style='display:flex;' >
        {
          buttonList.map(item => {
            const { permitName, disabled, icon, name, className, type, loading } = item
            let iconVal = getButtonAttribute(permitName, 'icon', icon)
            let typeVal = getButtonAttribute(permitName, 'type', type)
            let nameVal = getButtonAttribute(permitName, 'name', name)
            if (permitName === 'import' && item.type !== 'config') {
              return <el-upload
                action=''
                http-request={(file) => item.method(file)}
                show-file-list={false}
              >
                <el-button
                  size='medium'
                  type={typeVal}
                  disabled={disabled}
                  loading={loading}
                  icon={iconVal}
                >
                  {nameVal}
                </el-button>
              </el-upload>
            } else if (permitName === 'closeCurRoute') {
              return <close-cur-route-button icon={iconVal} type={typeVal} button-text={nameVal} />
            } else {
              return <el-button
                button size='medium'
                type={typeVal}
                disabled={disabled}
                loading={loading}
                icon={iconVal}
                class={[className, 'toolbar-button'].join(' ')}
                onClick={() => item.method()}
              >
                {nameVal}
              </el-button >
            }
          })
        }
      </span >
    ]
  }
}
</script>
